<template>
  <view>
    <view class="title_inner">
      <uni-segmented-control
        :current="current"
        :values="items.map(v=>v.title)"
        @clickItem="onClickItem"
        style-type="text"
        active-color="#268bd2"
      ></uni-segmented-control>
    </view>
    <scroll-view
      scroll-y
      class="content"
      enable-flex
      @scrolltolower="handleToLower"
    >
      <!-- <view v-if="current === 0">
        选项卡1的内容
      </view>
      <view v-if="current === 1">
        选项卡2的内容
      </view> -->

      <view
        class="img_wrap"
        v-for="(item,index) in vertical"
        :key="item.id"
      >
        <go-detail
          :index="index"
          :list="vertical"
        >
          <image
            :src="item.thumb"
            mode="widthFix"
          ></image>
        </go-detail>

      </view>

    </scroll-view>

  </view>
</template>

<script> 
import {
  uniSegmentedControl
} from '@dcloudio/uni-ui'

import goDetail from '../../components/goDetail'
export default {
  components: {
    uniSegmentedControl, goDetail
  },
  data () {
    return {
      items: [
        { title: '最新', order: 'new' },
        { title: '热门', order: 'hot' }],
      current: 0,
      // 请求参数
      params: {
        limit: 30,
        skip: 0,
        order: 'new'
      },
      id: '',
      // 获取到的图片数组
      vertical: [],
      // 是否还有更多数据
      hasMore: true
    }
  },
  onLoad (options) {
    this.id = options.id
    this.getList()
  },
  methods: {
    onClickItem (e) {
      this.current = e.currentIndex
      this.params.order = this.items[e.currentIndex].order
      // 将skip重置为0
      this.params.skip = 0
      // 将状态hasmore设置为true
      this.hasMore = true
      // 将数组清空
      this.vertical = []
      this.getList()
    },
    async getList () {
      const res = await this.$request({
        url: `/image/v1/vertical/category/${this.id}/vertical`,
        data: this.params
      })
      // 如果是最后一页了
      if (res.vertical.length !== this.params.limit) {
        this.hasMore = false
        uni.showToast({ title: '没有更多数据了', icon: 'none' })
      }
      // 将新的数据添加到data中
      this.vertical = [...this.vertical, ...res.vertical]

    },
    // 滚动空间触底事件
    handleToLower () {
      if (this.hasMore) {
        this.params.skip += 30
        this.getList()
        return
      }
      uni.showToast({ title: '没有更多数据了', icon: 'none' })

    }
  }
}
</script>

<style lang="scss" scope>
.title_inner {
  width: 30%;
  margin: 0 auto;
}
.content {
  display: flex;
  flex-wrap: wrap;
  // 注意使用calc的时候一定要有空格
  height: calc(100vh - 40px);
  .img_wrap {
    width: 33.33vw;
    border: 5rpx solid #ffffff;
  }
}
</style>